<template>
  <scroll-view class="swiperContainer" scroll-y="true" scroll-top="10" ﻿@scrolltolower="loadDown" @scrolltoupper="loadUp">
    <skeleton :skeleton="{name:'studyDetails'}" :showSkeleton="showSkeleton">
      <block slot="content">
        <view class="list">
          <view class="list-box" v-for="(bodyItem, index) in metaData" :key="index">
            <view class="list-box-content">
              <view class="list-box-content-left" @click="linkTo(bodyItem.subjectId)">
                <view class="list-box-content-text">{{ bodyItem.content }}</view>
              </view>

              <image
                class="list-box-content-right"
                src="../../../../../../static/study/del.png"
                @click="delQue(bodyItem.subjectId,index)"
              />
            </view>
          </view>
        </view>
        <view class="loading" v-if="noDataShow">没有错题数据~</view>
      </block>
    </skeleton>
  </scroll-view>
</template>

<script>
import UserService from "@/services/user/index";
const userService = new UserService();
export default {
  props: {
    currentCode: {
      type: String
    },
    code: {
      type: String
    },
    type: {
      type: Number
    },
    homeCode: {
      type: String
    },
    bodyBtn: {
      type: Boolean
    },
    activeIndex: {
      type: Number
    },
    index: {
      type: Number
    },
    item:{
      type:Object,
      default:function(){
        return {}
      }
    }
  },
  data() {
    return {
      textShow: false,
      page: 1,
      pageNo: 0,
      metaData: [],
      showSkeleton: true,
      headClassItem: [],
      noDataShow: false,
    };
  },
  computed: {
    activeClassIndex(){
      return this.item.activeClassIndex
    },
    classQusCode() {
      if (this.headClassItem.length == 0) return "";
      return this.headClassItem[this.activeClassIndex].id;
    }
  },
  watch: {
    currentCode: function(newVal) {
      if (newVal != this.code) {
        return;
      }
      this.loadMenuData();
    },
    classQusCode: function(newVal) {
      if (newVal == "") return;
      if (this.code == this.currentCode) {
        console.log(" watch classQusCode:", this.code);
        this.loadData(this.classQusCode, 1, false);
      }
    }
  },
  mounted() {
    if (this.code == this.homeCode) {
      this.loadMenuData();
    }
  },
  methods: {
    loadMenuData() {
      console.log("loadMenuData");
      if (this.headClassItem.length > 0) return;
      if (this.activeIndex == 0) {
        userService.mineWrongQueType(3).then(res => {
          if (res.success) {
            this.headClassItem = res.result.headItems;
            this.$emit("updateHeadItem", {
              index: this.index,
              headClassItem: this.headClassItem
            });
          }
        });
      } else if (this.activeIndex == 1) {
        userService.mineWrongQueType(2).then(res => {
          if (res.success) {
            this.headClassItem = res.result.headItems;
            this.$emit("updateHeadItem", {
              index: this.index,
              headClassItem: this.headClassItem
            });
          }
        });
      }
    },
    linkTo(id) {
      uni.navigateTo({
        url: `/pages/search/searchDetail?id=${id}&ascription=${this.currentCode}`
      });
    },
    loadData(classQusCode, page, loadData) {
      if ("" == classQusCode) {
        return;
      }
      if (loadData && metaData.length > 0) {
        return;
      }

      // const headItem = this.headItems[this.activeIndex];
      userService
        .wrongQueListByCode(classQusCode, page, "10")
        .then(wrongQueList => {
          if (wrongQueList.result.list.length == 0) {
            this.noDataShow = true;
            this.$emit('bodysBtn',false)
          } else {
            this.noDataShow = false;
            this.$emit('bodysBtn',true)
          }
          if (page > 1) {
            this.metaData = [...this.metaData, ...wrongQueList.result.list];
          } else {
            this.metaData = wrongQueList.result.list;
          }
          this.pageNo = wrongQueList.result.pages;
          this.page = page;
        })
        .then(() => {
          this.showSkeleton = false; //页面请求完成，取消骨架屏展示
        });
    },
    loadDown() {
      if (this.page == this.pageNo) {
        uni.hideLoading();
        this.textShow = true;
        uni.showToast({
          icon:'none',
          title: "没有更多了~",
          duration: 2000
        });
        return;
      }
      uni.hideLoading();
      const page = this.page + 1;
      this.loadData(this.classQusCode, page);
    },
    loadUp() {
      this.loadData(this.classQusCode, 1);
    },
    delQue(id, index) {
      let _this = this;
      uni.showModal({
        title: "提示",
        content: "确认删除这条错题？",
        success: function(res) {
          if (res.confirm) {
            userService.deleteWrongQue(id).then(res => {
              if (res.success) {
                _this.metaData.splice(index, 1);
                if(_this.metaData.length == 0){
                  _this.$emit('bodysBtn',false)
                }
                uni.showToast({
                  icon: "none",
                  title: "删除成功",
                  duration: 2000
                });
              } else {
                uni.showToast({
                  icon: "none",
                  title: "未删除成功",
                  duration: 2000
                });
              }
            });
          } else if (res.cancel) {
            return;
          }
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.list {
  padding-bottom: 40upx;
  background-color: #fff;

  &-box {
    padding: 40upx 24upx 0;
    &-title {
      margin-bottom: 20upx;
      font-size: 30upx;
      font-weight: bold;
      line-height: 38upx;
      letter-spacing: 0upx;
      color: #333333;
      font-family: PingFang-SC-Medium;
    }
    &-content {
      margin-bottom: 20upx;
      background-color: #ffffff;
      box-shadow: 0px 4upx 20upx 0upx rgba(153, 153, 153, 0.2);
      border-radius: 8upx;
      display: flex;
      align-items: center;
      justify-content: center;

      &-left {
        flex: 1;
        padding: 40upx 20upx;
      }

      &-type {
        font-family: PingFang-SC-Regular;
        font-size: 28upx;
        letter-spacing: 0px;
        color: #5ea1f8;
        float: left;
        margin-right: 20upx;
      }
      &-text {
        font-family: PingFang-SC-Regular;
        font-size: 28upx;
        letter-spacing: 0upx;
        color: #333333;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }

      &-right {
        width: 40upx;
        height: 40upx;
        border-radius: 50%;
        margin-right: 10upx;
        margin-top: 4upx;
        margin-left: 20upx;
      }
    }
  }
}

.loading {
  text-align: center;
  font-size: 28upx;
  padding: 20upx 0;
  color: #999;
}
</style>
